<template>
  <div>
    <div class="hen" >
      <el-row class="hengfu">
        <el-col :span="12">
          <el-page-header @back="goBack">
            <template #content>
              <el-breadcrumb-item>首页</el-breadcrumb-item>
            </template>
          </el-page-header>
        </el-col>
      </el-row>
    </div>

    <div class="tab" v-loading="loading" >
      <div class="trr" >
        <el-row>
          <el-col :span="8">
            <div class="box" style=" background-color:#E6A23C;">
              <text>在线人数：{{ user.lineCount }}</text>
              <br />
              <hr style="width: 90%;" />
              <text>用户人数：{{ user.allCount }}</text>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="box" style="background-color:#67C23A;margin: auto;">
              <div style="">
                <text>考试场次：{{ props.count }}</text>
                <br />
                <hr style="width: 90%;" />
                <text>平均分：{{ props.avg }}</text>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="box" style="background-color:#CC99CC;float: right;">
              <text>试卷数量：{{ question.tpCount }}</text>
              <br />
              <hr style="width: 90%;" />
              <text>题目数量：{{ question.queCount }}</text>
            </div>
          </el-col>
        </el-row>
        <hr  style="margin-top: 3vh;" />
      </div>

      <div id="first_bar" :style="{ height: '300px' }"></div>
      <hr />
      <div id="first_bar3" :style="{ height: '300px' }"></div>
      <hr />
      <div id="first_bar2" :style="{ height: '300px' }"></div>


    </div>
  </div>
</template>

<script lang="ts">
import type { TypeIndexDto } from '../type/index'
import { defineComponent, onMounted, onUnmounted, reactive, toRefs } from 'vue'
import { GetUserStatistics, GetExamStatistics, GetQuestionStatistics } from '../api/index/index'
import { ElNotification } from 'element-plus'
import { useRouter } from 'vue-router';
import * as echarts from "echarts";


export default defineComponent({
  name: "echartsBox",
  setup() {
    const router = useRouter();

    const echart = echarts

    const data = reactive<TypeIndexDto>({
      user: [],
      props: [],
      question: [],
      loading: true,
    })

    onUnmounted(() => {
      echart.dispose;
    });

    const events = {
      goBack() {
        window.history.go(-1)
      },


      first_bar3: function (id: any) {
        let chart = echart.init(document.getElementById(id));
        chart.clear();
        let option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
            },
          },
          title: {
            text: "考试平均分",
            subtext: "平均分"
          },
          color: ['#67c23a'],
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [
                120,
                {
                  value: 200,
                  itemStyle: {
                    color: '#a90000'
                  }
                },
                150,
                80,
                70,
                110,
                130
              ],
              type: 'bar'
            }
          ]
        };
        GetQuestionStatistics({}).then((res: any) => {
          if (res.result == 0) {
            data.question = res.data
            option.series[0].data = []
            option.xAxis.data = []
            res.data.data.forEach((element: any) => {
              option.series[0].data.push(element.score)
              option.xAxis.data.push(element.name)
            });
            let max = Math.max(...option.series[0].data)
            let idnex = option.series[0].data.findIndex(res => res == max)
            option.series[0].data[idnex] = {
              value: max,
              itemStyle: {
                color: '#67c23a'
              }
            }
            chart.setOption(option);
          }
        })
      },

      first_bar2: function (id: any) {
        let chart = echarts.init(document.getElementById(id));
        chart.clear();
        let option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
            },
          },
          color: ['#CC99CC'],
          title: {
            text: "7天内考试次数",
            subtext: "考试次数"
          },
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [120, 200, 150, 80, 70, 110, 130],
              type: 'bar'
            }
          ]
        };

        GetExamStatistics({}).then((res: any) => {
          if (res.result == 0) {
            data.loading = false
            data.props = res.data
            option.series[0].data = []
            option.xAxis.data = []

            res.data.data.forEach((element: any) => {
              option.series[0].data.push(element.count)
              option.xAxis.data.push(element.date)
            });

            chart.setOption(option);
          }

        })

      },

      first_bar: function (id: any) {
        let chart = echarts.init(document.getElementById(id));
        chart.clear();
        const option = {
          title: {
            text: "7天内在线人数",
            subtext: "在线人数"
          },
          color: ['#E6A23C'],
          colorBy: 'series',
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
            },
          },
          xAxis: {
            type: 'category',
            data: ['1', '2', '3', '4', '5', '6', '7']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [820, 932, 901, 934, 1290, 1330, 1320],
              type: 'line',
            }
          ]
        };
        GetUserStatistics({}).then((res: any) => {
          if (res.result == 0) {
            data.loading = false
            data.user = res.data
            option.series[0].data = []
            option.xAxis.data = []
            res.data.data.forEach((element: any) => {
              option.series[0].data.push(element.count)
              option.xAxis.data.push(element.date)
            });
            chart.setOption(option);
          }
        })

      },

    }

    onMounted(() => {
      events.first_bar3("first_bar3")
      events.first_bar2("first_bar2")
      events.first_bar("first_bar")

    })

    return {
      ...toRefs(data),
      ...events
    }

  },
})
</script>

<style scoped>
/* 背景 */
.tab {
  margin-top: 1vh;
  padding: 1vh;
  background-color: rgb(253, 253, 253);
  /* border: 1px solid darkgray;
  box-shadow: 0px 0px 2px rgb(188, 185, 185); */
  border-radius: 5px;
}

/* 按钮样式 */
.grid-content {
  margin: auto;
  margin-top: 2vh;
  border-radius: 5px;
  background-color: rgb(251, 251, 251);
  width: 95%;
  line-height: 45px;
  text-align: left;
  padding: 10px;
  border: 1px solid darkgray;
  box-shadow: 0px 0px 1px grey;
}

.flex {
  float: right;
  /* margin-right: 2vh; */
}

/* .trr {
  margin: auto;
  border-radius: 5px;
  padding: 10px;
  height: 15vh;
  background-color: rgb(251, 251, 251);
  border: 1px solid darkgray;
  box-shadow: 0px 0px 1px grey;
} */

.box {
  height: 18vh;
  width: 95%;
  line-height: 8vh;
  border-radius: 10px;
  color: rgb(255, 255, 255);
  border: 2px solid rgb(235, 234, 234);
}

.box:hover{
  box-shadow: 0px 0px 40px rgb(190, 189, 189);
}
</style>
